<template>
  <a-modal :title="'查看附件'" :visible="true" width="90%" :footer="null" @cancel="reset">
    <div class="main">
      <a-card>
        <a-table bordered :columns="cloumn" :pagination="pagination" @change="handleTableChange" style="margin-top:20px"
      :data-source="dataSource">
      
      <template slot="type" slot-scope="txt, record">
        <span v-if="record.type == 1">服用功能报告</span>
        <span v-if="record.type == 2">进口产地报告</span>
        <span v-if="record.type == 3">原料产地报告</span>
      </template>
      <template slot="fileUrl" slot-scope="txt, record">
        <a :href="record.fileUrl" target="_blank">{{ record.fileUrl }}</a>
      </template>
      <template slot="action" slot-scope="txt, record">
        <a class="mr-10" @click="toExport(record)">
          更新
        </a>
        <a-popconfirm :title="`确定要删除该项吗?`" @confirm="deleteFile(record)" >
          <a class="mr-10">
            删除
          </a>
        </a-popconfirm>
      </template>
    </a-table>
    <exportList v-if="showExport" :id="id" :type="type" @closeExport="closeExport"></exportList>
      </a-card>
    </div>
  </a-modal>
</template>
  
<script>
import exportList from './updateFile.vue'

import { getuploadFiles,deleteFiles } from '@api/material/index'
const cloumn = [
  {
    title: '序号',
    dataIndex: 'id'
  },
  {
    title: '产品编号',
    dataIndex: 'sccode'
  },
  {
    title: '产品名称',
    dataIndex: 'scname'
  },
  {
    title: '附件类型',
    dataIndex: 'type',
    scopedSlots: { customRender: 'type' }

  },
  {
    title: '附件名称',
    dataIndex: 'fileName'
  },
  {
    title: '附件地址',
    width:200,
    dataIndex: 'fileUrl',
    scopedSlots: { customRender: 'fileUrl' }

  },
  {
    title: '创建时间',
    dataIndex: 'createTime'
  },
  
  {
    title: '操作',
    width: 100,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    exportList
  },

  props: {
    sccode: {
      type: String,
      default: null,
      required: false,
    },
  },

  data() {
    return {
      cloumn,
      dataSource:[],
      id:'',
      type:'',
      loading: false,
      showExport:false,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      },
    }
  },

  created() {
    const { sccode} = this.$props
    if(sccode){
      this.getList()
    }
  },
  mounted() {
   },
   computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  methods: {
    handleTableChange(pagination) {
      this.pagination = pagination
      this.getList()
    },
    async getList() {
        const params = {
          sccode: this.sccode,
          type: '',
          current: this.pagination.current,
          size: this.pagination.pageSize
        }
        try {
          const res = await getuploadFiles(params)
          if (res.code == 200) {
            this.dataSource = res.data.records
            this.pagination.total = res.data.total
            this.pagination.current = res.data.current
          } else {
            if (res.msg) {
              this.$message.error(res.msg)
            } else {
              this.$message.error('获取列表失败！')
            }
          }
        } catch (error) {
          this.$message.error('获取列表失败！')
        }
    },
    toExport(record) {
      this.id = record.id
      this.type = record.type
      this.showExport = true
    },
    closeExport() {
      this.showExport = false
      this.getList()
    },
    async deleteFile(record) {
        try {
          const res = await deleteFiles({id:record.id})
          if (res.code == 200) {
            this.$message.success('删除成功！')
            this.getList()
          } else {
            if (res.msg) {
              this.$message.error(res.msg)
            } else {
              this.$message.error('删除失败！')
            }
          }
        } catch (error) {
          this.$message.error('删除失败！')
        }
    },
    reset() {
      this.$emit('close')
    },
  }
}
</script>
<style scoped>
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.ml-20 {
  margin-left: 20px;
}

.dynamic-delete-button {
  cursor: pointer;
  position: absolute;
  right: -40px;
  top: -4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}

.dynamic-delete-button:hover {
  color: #777;
}

.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>